<template>
  <div>
    <el-col v-for="(item, index) in iconList" :key="index" :span="item.span">
      <el-card class="icon-panel" shadow="hover">
        <el-image :src="item.imgSrc" style="height: 191px" />
        <p>{{ item.title }}</p>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  import gbaqImg from '@/assets/business/ggaq.png'
  import zhjtImg from '@/assets/business/zhjt.png'
  import zhcgImg from '@/assets/business/zhcg.png'
  import rkjcImg from '@/assets/business/rkjc.png'
  import zhhbImg from '@/assets/business/zhhb.png'

  export default {
    data() {
      return {
        // 卡片图标
        iconList: [
          {
            click: 'randomTheme',
            icon: 'apps-line',
            title: '公共安全',
            link: '',
            color: '#95de64',
            imgSrc: gbaqImg,
            span: 5,
          },
          {
            click: 'changeTheme',
            icon: 'brush-2-line',
            title: '智慧交通',
            link: '',
            color: '#69c0ff',
            imgSrc: zhjtImg,
            span: 5,
          },
          {
            icon: 'baidu-line',
            title: '智慧城管',
            link: '',
            color: '#1890FF',
            imgSrc: zhcgImg,
            span: 4,
          },

          {
            icon: 'video-line',
            title: '人口监测',
            link: '',
            color: '#ffc069',
            imgSrc: rkjcImg,
            span: 5,
          },
          {
            icon: 'table-line',
            title: '智慧环保',
            link: '',
            color: '#5cdbd3',
            imgSrc: zhhbImg,
            span: 5,
          },
        ],
      }
    },
    methods: {
      changeTheme() {
        this.$baseEventBus.$emit('theme')
      },
      handleMore() {
        this.$baseAlert('敬请期待！')
      },
      randomTheme() {
        this.$baseEventBus.$emit('random-theme')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .icon-panel {
    height: 280px;
    text-align: center;
    cursor: pointer;

    &:hover {
      i {
        transform: scale(1.15);
      }
    }

    i {
      display: block;
      width: 50px;
      height: 50px;
      margin: auto;
      font-size: 40px;
      transition: all ease-in-out 0.3s;
    }

    p {
      margin: 10px 0;
      font-weight: 700;
      font-size: 20px;
    }
  }
</style>
